<template>
  <div>
    <el-container>
      <el-header>
        <div style="margin-top: 15px;">
          <el-button style="float:right;margin-left:20px" size="small" @click="$router.push('/home/album')">返回</el-button>
          <el-button style="float:right;" size="small" @click="upload">上传图片</el-button>
        </div>
      </el-header>
      <el-main style="height:483px;padding-left: 0;">
        <div>
          <el-row class="demo-block" >
            <div>
              <div v-for="(image, j) in lists" :key="j">
                <el-col :span="size" class="meta" :style="(size>=6&&size<=10)?'margin-left:20px;margin-right:80px':'margin-left:20px;margin-right:20px'">
                  <el-image
                    style="width: 100%; height: 150px;"
                    class="grid-content bg-purple"
                    :src="image.url"
                  ></el-image>
                  <el-checkbox-group
                    v-model="checkedUid"
                    @change="handleCheckedCitiesChange"
                  >
                    <div class="demo-block-control" style="padding-top:10px">
                      <p>
                        <el-checkbox :label="image.uid"
                          ><p v-if="image.uid != null"></p></el-checkbox
                        >
                        <a href="#" @click="transferAlbum(image)" style="font-size:12px;margin-left:10px;"
                          >转移相册</a
                        >
                        <a @click="deletePicture(image)" style="font-size:12px;margin-left:10px;"
                          >删除图片</a
                        >
                      </p>
                    </div>
                  </el-checkbox-group>
                </el-col>
              </div>
            </div>
          </el-row>
        </div>
      </el-main>
      <!--上传图片-->
      <el-dialog
        title="上传图片"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose">
        <span>
          <el-form label-position="right" label-width="80px" :model="form">
            <el-form-item label="选择相册">
              <el-select v-model="form.id" placeholder="请选择上传的相册">
                <el-option
                  v-for="item in option"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上传图片">
              <el-upload
                class="avatar-uploader"
                action="http://localhost:88/api/oss"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
          </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="uploadImage">确 定</el-button>
        </span>
      </el-dialog>

     <!--转移相册-->
     <el-dialog
        title="转移相册"
        :visible.sync="dialogImage"
        width="50%"
        :before-close="handleClose">
        <span>
          <el-form label-position="right" label-width="80px" :model="form">
            <el-form-item label="选择相册">
              <el-select v-model="form.id" placeholder="请选择要转移到的相册">
                <el-option
                  v-for="item in option"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogImage = false">取 消</el-button>
          <el-button type="primary" @click="confirmTransfer">确 定</el-button>
        </span>
      </el-dialog>

      <el-footer>
        <div style="margin-top: 0px;">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <el-select v-model="value" placeholder="批量操作" style="margin:12px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button style="margin:12px" size="small" @click="determine">确定</el-button>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[4, 6, 8, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="float:right;margin-top:10px"
          >
          </el-pagination>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 0, // 图片库id
      size:4,//布局
      value: "", // select 保存值
      // 照片库
      lists: [],
      pageNum: 1, // 第几页
      pageSize: 10, // 页大小
      total: 0, // 总条数
      options: [
        {
          value: "1",
          label: "转移相册"
        },
        {
          value: "2",
          label: "删除照片"
        }
      ], // 复选框选择值
      checkAll: false, // 选中状态
      isIndeterminate: true, // 设置 indeterminate 状态，只负责样式控制
      checkedUid: [], //选中的值
      Uids: [], // 选择的全部内容
      dataFrom: [], // 图片库
      dialogVisible: false,// 上传照片对话框弹出
      form: {},//表单对象
      option: {},//全部相册
      imageUrl: '',//图片地址
      dialogImage: false//转移相册
    };
  },
  methods: {
    async getAlumList() {
      const { data: res } = await this.$http.get(
        `vi/goods/album/detail/${this.id}`
      );
      this.lists = JSON.parse(res.data.tbAlbum.imageItems);
      this.total = this.lists.length;
      for (let i = 0; i < this.total; i++) {
        this.Uids.push(this.lists[i].uid);
      }
      this.dataFrom = this.lists
      const data = [];
      for(let i=0;i<this.total;i++){
        data.push(this.lists[i])
      }
      this.lists = data

      //查询全部相册
      const { data: res2 } = await this.$http.get(
        `vi/goods/album/list`
      );
      this.option = res2.data.list
    },//页条数
    handleSizeChange(val) {
      this.pageNum = 1;
     this.lists = this.dataFrom;
     if(val==10){
        this.size = 4;
        const data = [];
        for(let i=0;i<val;i++){
          data.push(this.lists[i])
        }
        this.pageSize =10;
        this.lists = data
     }
     if(val==8){
        this.size = 5;
        const data = [];
        for(let i=0;i<val;i++){
          data.push(this.lists[i])
        }
        this.pageSize =8;
        this.lists = data
     }
     if(val==6){
        this.size = 6;
        const data = [];
        for(let i=0;i<val;i++){
          data.push(this.lists[i])
        }
        this.pageSize=6;
        this.lists = data
     }
     if(val==4){
        this.size = 10;
        const data = [];
        for(let i=0;i<val;i++){
          data.push(this.lists[i])
        }
        this.pageSize=4;
        this.lists = data
     }
    },//当前页
    handleCurrentChange(val) {
      const data = [];
      this.pageNum = val;
      const num = this.dataFrom.length - (this.pageNum-1)*this.pageSize;
      if(this.pageSize>num){
        for(let i=0;i<num;i++){
          data.push(this.dataFrom[(this.pageNum-1)*this.pageSize+i])
        }
      }else{
        for(let i=0;i<this.pageSize;i++){
          data.push(this.dataFrom[(this.pageNum-1)*this.pageSize+i])
        }
      }
      
      this.lists = data
    },//全选
    handleCheckAllChange(val) {
      this.checkedUid = val ? this.Uids : [];
      this.isIndeterminate = false;
    },// 单选
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.Uids.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.Uids.length;
    },//转移弹框
    transferAlbum(row){
      this.form = {}
      if(this.checkedUid.length=="0"){
        this.checkedUid.push(row.uid)
      }
      this.dialogImage = true;
    },//转移相册
    async confirmTransfer(){
      const map = {id:this.id,uid:`${this.checkedUid.length==this.Uids.length?this.Uids:this.checkedUid}`,title:this.form.id}
      const { data: res } = await this.$http.put(
            `vi/goods/album/${this.checkedUid.length>1?'removeAlbumList':'removeAlbum'}`,
            map
        );
      if(res.success==true){
        this.$message({
          message: res.message,
          type: 'success'
        })
      }else{
        this.$message.error(res.message);
      }
      this.getAlumList()
      this.checkedUid = []
      this.dialogImage = false;
    },
    //删除相册
    deletePicture (row){
      if(this.checkedUid.length=="0"){
        this.checkedUid.push(row.uid)
      }
       this.$confirm("此操作将永久删除该图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
          const map = {id:this.id,uid:`${this.checkedUid.length==this.Uids.length?this.Uids:this.checkedUid}`}
          const { data: res } = await this.$http.put(
              `vi/goods/album/${this.checkedUid.length>1?'deleteAlbumList':'deleteAlbum'}`,
              map
            );

          if (res.success === true) {
            this.$message({
              type: "success",
              message: res.message
            });
          const {data:ress } = await this.$http.post('vi/oss/ossDelete?fileName=' + row.url)
          } else {
            this.$message({
              type: "info",
              message: res.message
            });
          }
          this.getAlumList()
        })
        .catch(() => {
          this.checkedUid = []
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },//确定按钮
    determine(){
       if(this.value==''){
         this.$message({
          message: '请选择你需要的操作！',
          type: 'warning'
        });
         return
       }
       if(this.value==1){
         this.form = {}
         this.dialogImage = true
       }
       if(this.value==2){
         this.deletePicture()
       }
       if(this.checkedUid.length==0){
         this.$message({
          message: '请选择你要操作的对象！',
          type: 'warning'
        });
        return
       }
    },//对话框关闭
    handleClose(done) { 
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },//打开对话框
    upload(){
      this.form = {}
      this.dialogVisible = true
    },//图片上传确定方法
    async uploadImage(){
      this.form.url = this.imageUrl.data.fileUrl;
      const { data: res } = await this.$http.put(
        `vi/goods/album/updateList`,
        this.form
      );
      if(res.success==true){
        this.$message({
          message: res.message,
          type: 'success'
        })
      }else{
        this.$message.error(res.message);
      }
      this.getAlumList()
      this.dialogVisible = false
    },
    // 图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = file.response;
    },
    // 上传之前的回调
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPng = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!(isJPG || isPng)) {
        this.$message.error("上传图片只能是JPG或者PNG格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过2MB!");
      }
      return (isJPG || isPng) && isLt2M;
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.getAlumList();
    
  }
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.demo-block {
  margin-bottom: 24px;
}

.demo-block {
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: 0.2s;
}

.meta {
  border-top: 1px solid #eaeefb;
  overflow: hidden;
  height: 210px;
  transition: height 0.2s;
}

.demo-block-control {
  border-top: 1px solid #eaeefb;
  height: 44px;
  box-sizing: border-box;
  background-color: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  text-align: center;
  margin-top: -1px;
  color: #d3dce6;
  cursor: pointer;
  position: relative;
  left: 0px;
}
</style>
